<template>
  <body class="search-index">
    <section class="content" id="content">
      <div class="back-home">
        <a href="javascript:void(0);" @click="jumpHome()">返回深圳节能在线网站</a>
      </div>
      <h1 class="search-h1">欢迎使用深圳市工业节能与绿色发展网站搜索平台</h1>
      <form class="search-main flex">
        <input
          type="search"
          v-model.trim="keywords"
          name=""
          placeholder="能效"
          class="text fx1"
        />
        <button class="submit" @click.prevent="searchBottm($event)">搜索</button>
      </form>
      <div class="search-tabs flex">
        <a
          href="javascript:void(0);"
          @click="filterSearch('node_all')"
          :class="[searchParameter.condition.node_code == '' ? 'on' : '']"
          >全部</a
        >
        <a
          href="javascript:void(0);"
          @click="filterSearch('zcfg')"
          :class="[searchParameter.condition.node_code == 'zcfg' ? 'on' : '']"
          >政策法规</a
        >
        <a
          href="javascript:void(0);"
          @click="filterSearch('gzdt')"
          :class="[searchParameter.condition.node_code == 'gzdt' ? 'on' : '']"
          >工作动态</a
        >
        <a
          href="javascript:void(0);"
          @click="filterSearch('tzgg')"
          :class="[searchParameter.condition.node_code == 'tzgg' ? 'on' : '']"
          >通知公告</a
        >
        <!-- <a href="#" :class="[searchParameter.condition.node_code==''?'on':'']">宣传培训</a>
        <a href="#" :class="[searchParameter.condition.node_code==''?'on':'']">常见问题</a>-->
      </div>
      <div class="flex search-result">
        <div class="search-result-left">
          <div class="search-result-order flex">
            <p v-show="isshow_header">
              找到 <span>{{ searchData.total }}</span> 条结果 （用时
              {{ (searchData.usage_ms / 1000).toFixed(2) }} 秒）
            </p>
            <div class="divInput">
              <div class="input" @click="openValue">
                <input v-model="value" type="text" placeholder="请选择排序类型" />
                <img src="../../assets/images/pullDown.png" alt="" />
              </div>
              <div class="list" v-show="show">
                <ul>
                  <li
                    @click="getvalue(index, item, item.code)"
                    v-for="(item, index) in tableData"
                    :key="item.code"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
            <div class="divInput">
              <div class="input" @click="timeValueData">
                <input v-model="timeValue" type="text" placeholder="请选择时间" />
                <img src="../../assets/images/pullDown.png" alt="" />
              </div>
              <div class="list" v-show="timeShow">
                <ul>
                  <li
                    @click="getTime(index, item, item.code)"
                    v-for="(item, index) in timeData"
                    :key="item.code"
                  >
                    {{ item.name }}
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div
            class="search-result-item"
            v-for="(item, index) in searchData.list"
            :key="index"
            @click="jumpData(item)"
          >
            <div class="head">
              <div class="tit" v-html="item.title"></div>
              <div class="date">{{ item.publish_date }}</div>
            </div>
            <div
              class="info"
              v-if="item.chr_content != ''"
              v-html="item.chr_content"
            ></div>
          </div>

          <div class="page clear black">
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="prev, pager, next, jumper"
              :total="pagetotal"
              prev-text="上一页"
              next-text="下一页"
            >
              <el-pagination layout="prev, pager, next" :total="1000"> </el-pagination>
            </el-pagination>
          </div>
        </div>
        <div class="search-result-right">
          <dl class="hot-recommended">
            <dt>热点搜索</dt>
            <dd v-for="(item, index) in hotwords" :key="index">
              <a href="javascript:void(0)" @click="jumpSearch(item)">{{ item }}</a>
            </dd>
          </dl>
          <dl class="hot-recommended">
            <dt>历史搜索</dt>
            <dd v-for="(item, index) in lastwords" :key="index">
              <a href="javascript:void(0)" @click="jumpSearch(item)">{{ item }}</a>
            </dd>
          </dl>
        </div>
      </div>
    </section>
    <footer>
      <p>主办单位：深圳市工业和信息化局</p>
      <p>
        投诉/咨询电话：12345 88102553 咨询邮箱：xzc@gxj.sz.gov.cn
        地址：深圳福田福中三路市民中心三楼深圳市工业和信息化局
      </p>
      <p>
        网站标识码：4403000048 <a href="#">粤ICP备10053215号</a>
        <a href="#">粤公网安备 44030402003015号</a>
      </p>
      <p>
        <a href="#">隐私声明</a><span class="line">|</span><a href="#">版权保护</a
        ><span class="line">|</span><a href="#">网站帮助</a><span class="line">|</span
        ><a href="#">联系我们</a><span class="line">|</span><a href="#">网站地图</a>
      </p>
      <a href="#" class="icon"></a>
    </footer>
  </body>
</template>
<script>
import { getSearch, getHotsearch } from "../../api/public.js";
export default {
  data() {
    return {
      searchParameter: {
        ipage: "1",
        page_size: "10",
        condition: {
          key_words: "",
          time: "1",
          order: "1",
          node_code: "",
        },
      },
      isshow_header: false,
      searchData: [],
      keywords: "",
      pagetotal: 0,
      loading: true,
      hotwords: [],
      lastwords: [],
      tableData: [
        {
          name: "智能排序",
          code: "1",
        },
        {
          name: "发布日期",
          code: "2",
        },
      ],
      timeData: [
        {
          name: "全部",
          code: "1",
        },
        {
          name: "一天内",
          code: "2",
        },
        {
          name: "一周内",
          code: "3",
        },
        {
          name: "一个月内",
          code: "4",
        },
        {
          name: "一年内",
          code: "5",
        },
      ],
      show: false,
      value: "智能排序",
      timeShow: false,
      timeValue: "全部",
    };
  },
  methods: {
    openValue() {
      this.show = !this.show;
    },
    timeValueData() {
      this.timeShow = !this.timeShow;
    },
    getvalue(index, item, code) {
      this.value = item.name;
      this.show = false;
      this.searchParameter.ipage = "1";
      this.searchParameter.page_size = "10";
      this.searchParameter.condition.order = code;
      this.getHotSearch();
    },
    getTime(index, item, code) {
      this.tiemValue = item.name;
      this.timeShow = false;
      this.searchParameter.ipage = "1";
      this.searchParameter.page_size = "10";
      this.searchParameter.condition.order = code;
      this.getHotSearch();
    },
    handleSizeChange(val) {
      this.searchParameter.ipage = 1;
      this.searchParameter.page_size = val;
      this.getHotSearch();
    },
    handleCurrentChange(val) {
      this.searchParameter.ipage = val;
      this.getHotSearch();
    },
    filterSearch(node_code, time, order) {
      this.searchParameter.ipage = "1";
      this.searchParameter.page_size = "10";
      this.value = "智能排序";
      this.tiem = "智能排序";
      if (node_code) {
        if (node_code == "node_all") {
          this.searchParameter.condition.node_code = "";
        } else {
          this.searchParameter.condition.node_code = node_code;
        }
      }
      if (time) {
        this.searchParameter.condition.time = time;
      }
      if (order) {
        this.searchParameter.condition.time = order;
      }

      this.getHotSearch();
    },
    //返回
    jumpHome() {
      this.$router.push({
        path: "/",
      });
    },

    initHotWords() {
      getHotsearch({
        count: 3,
      }).then((data) => {
        this.hotwords = data.data.hot;
        this.lastwords = data.data.lately;
      });
    },
    searchBottm(e) {
      if (!this.keywords) {
        this.$message({
          message: "请输入搜搜关键字!",
          type: "warning",
        });
      } else {
        this.searchParameter.condition.key_words = this.keywords;
        this.searchParameter.condition.time = "1";
        this.searchParameter.condition.order = "1";
        this.searchParameter.condition.node_code = "";

        this.searchParameter.ipage = "1";
        this.searchParameter.page_size = "10";
        this.getHotSearch();
      }
    },

    jumpSearch(item) {
      if (!item) {
        this.$message({
          message: "请输入搜搜关键字!",
          type: "warning",
        });
      } else {
        this.searchParameter.condition.key_words = item;
        this.searchParameter.condition.time = "1";
        this.searchParameter.condition.order = "1";
        this.searchParameter.condition.node_code = "";

        this.searchParameter.ipage = "1";
        this.searchParameter.page_size = "10";
        this.keywords = item;
        this.getHotSearch();
      }
    },
    //全站搜索
    getHotSearch() {
      this.loading = true;
      getSearch(this.searchParameter).then((res) => {
        this.isshow_header = true;
        this.searchData = res.data;

        this.pagetotal = res.data.total;
        this.loading = false;
      });
    },
    //判断是带参数过来
    judgeQuery() {
      var data = this.$route.query.searchData;
      this.searchParameter.condition.key_words = data ? data : "";

      this.searchParameter.condition.time = "1";
      this.searchParameter.condition.order = "1";
      this.searchParameter.condition.node_code = "";
      this.searchParameter.ipage = "1";
      this.searchParameter.page_size = "10";
      this.keywords = data ? data : "";
      this.getHotSearch();
    },

    jumpData(item) {
      let code = item.node_code;
      if (code == "zcfg" || code == "tzgg" || code == "gzdt") {
        this.$confirm("您将跳转到其它网站,是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            window.open(item.link);
          })
          .catch(() => {});
        return false;
      } else if (
        code == "faq_dlzyzhly" ||
        code == "faq_qyzc" ||
        code == "faq_wfjgzc" ||
        code == "faq_zhzh" ||
        code == "faq_zhma"
      ) {
        this.$router.push({
          path: "/construct",
          query: {
            node_code: code,
            id: item.id,
          },
        });
      } else {
        return;
      }

      return;
    },
  },
  mounted() {
    //document.getElementsByClassName("el-pagination__jump")[0].childNodes[0].nodeValue = "到第";
    this.judgeQuery();
    this.initHotWords();
  },
};
</script>
<style lang="less">
.el-pagination.is-background .el-pager li:not(.disabled).active {
  color: #fff;
  background: #3154b2;
  font-size: 14px;
}

.el-pagination.is-background .el-pager li {
  color: #222;

  font-size: 14px;
}

._sort {
  .el-input__inner {
    border: 0px;
    width: 120px;
    color: #000000;
    cursor: pointer;
  }

  .el-select__caret {
    font-weight: bold;
    color: #000000;
    font-size: 19px;
  }
}

.el-pagination__jump {
  display: none !important;
}

.el-pagination__jump .el-input__inner {
  font-size: 14px !important;
  color: #fff !important;
  margin: 0 10px !important;
  border: 1px solid #0b5c8b !important;
  background: transparent !important;
  outline: none !important;
  text-align: center !important;
  height: 34px !important;
  width: 50px !important;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
  display: none;
}

.el-pagination__editor.el-input {
  width: 68px !important;
  display: none;
}

.btn-prev {
  width: 78px !important;
  background-color: transparent !important;
  display: inline-block !important;
  line-height: 32px !important;
  font-size: 14px !important;
  color: #fff !important;
  margin: 0 5px !important;
  border: 1px solid #0b5c8b !important;
}

.btn-next {
  width: 78px !important;
  background-color: transparent !important;
  display: inline-block !important;
  line-height: 32px !important;
  font-size: 14px !important;
  color: #fff !important;
  margin: 0 5px !important;
  border: 1px solid #0b5c8b !important;
}

.back-home {
  padding-top: 20px;
}

.back-home a {
  color: #fff;
  display: block;
  position: relative;
  padding-left: 28px;
  height: 24px;
  line-height: 24px;
  font-size: 16px;
}

.back-home a:before {
  content: "\e61f";
  font-family: "iconfont";
  font-size: 22px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
}

.search-main {
  height: 50px;
  background: #ecf7ff;
  position: relative;
}

.search-main .text {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  padding-left: 55px;
}

.search-main:before {
  content: "\e78a";
  font-family: "iconfont";
  color: #5c92fd;
  font-size: 19px;
  position: absolute;
  top: 0;
  left: 26px;
  pointer-events: none;
  line-height: 50px;
}

.search-main .submit {
  border: none;
  outline: none;
  background: #4570d8;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  width: 138px;
}

.search-h1 {
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  color: #fff;
  margin: 20px 0 35px;
}

.search-tabs {
  height: 50px;
  background: #f5f5f5;
  margin-top: 15px;
}

.search-tabs a {
  display: block;
  padding: 0 35px;
  line-height: 50px;
  font-size: 16px;
  color: #000;
  position: relative;
}

.search-tabs a.on {
  color: #4570d8;
}

.search-tabs a.on:before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #4570d8;
}

.search-result {
  padding: 10px 0 15px;
}

.search-result-left {
  width: 1000px;
  padding: 0 26px 30px;
  background: #fff;
}

.search-result-order {
  height: 56px;
  line-height: 56px;
  font-size: 14px;
  border-bottom: 1px solid #e5e5e5;
}

.search-result-order p {
  color: #565656;
}

.search-result-order p span {
  color: #be0000;
}

.search-order-select {
  margin-left: 25px;
  margin-right: 5px;
  position: relative;
}

.search-order-select div {
  cursor: pointer;
  padding-right: 28px;
  position: relative;
  color: #000;
  user-select: none;
}

.search-order-select div:after {
  content: "\e620";
  font-family: "iconfont";
  color: #000;
  font-size: 16px;
  line-height: 56px;
  position: absolute;
  top: 0;
  right: 2px;
}

.search-order-select ul {
  position: absolute;
  z-index: 3;
  top: 56px;
  left: 50%;
  background: #f3f3f3;
  width: 150px;
  margin-left: -75px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.14);
  display: none;
}

.search-order-select ul li {
  cursor: default;
  padding-left: 12px;
  font-size: 14px;
  color: #000;
  line-height: 36px;
}

.search-order-select ul li:hover {
  font-weight: bold;
  color: #fff;
  background: #73aafe;
}

.search-result-item {
  padding: 22px 0 16px;
  border-bottom: 1px solid #e5e5e5;
}

.search-result-item .head {
  overflow: hidden;
  line-height: 24px;
}

.search-result-item .head .tit {
  font-size: 16px;
  color: #0077f9;
  float: left;
}

.search-result-item .head .date {
  float: right;
  font-size: 14px;
  color: #565656;
}

.search-result-item .info {
  margin-top: 14px;
  color: #222;
  line-height: 24px;
  font-size: 14px;
}

.search-result-right {
  width: 180px;
  margin-left: 20px;
}

.hot-recommended {
  background: #fff;
  margin-bottom: 15px;
  padding-bottom: 30px;
}

.hot-recommended dt {
  font-size: 16px;
  color: #000;
  font-weight: bold;
  border-bottom: 1px solid #e5e5e5;
  line-height: 51px;
  padding-left: 20px;
  margin-bottom: 20px;
}

.hot-recommended dd {
  padding: 6px 20px;
}

.hot-recommended dd a {
  display: inline-block;
  font-size: 14px;
  color: #565656;
  line-height: 24px;
}

.hot-recommended dd a:hover {
  color: #000;
  text-decoration: underline;
}

.divInput {
  ul li {
    list-style: none;
  }

  ul {
    background-color: #fff;
  }

  .input {
    width: 140px;
    height: 40px;
    line-height: 44px;
    padding-left: 16px;
    position: relative;
    margin-top: 7px;
  }

  .input input {
    border: none;
    outline: none;
    width: 90%;
  }

  .input img {
    position: absolute;
    right: 37px;
    top: 31%;
    font-weight: bold;
    width: 20px;
    height: 20px;
  }

  .list {
    width: 110px;
    border: 1px solid #cccccc;
    overflow: hidden;
    position: relative;
  }

  .list ul li {
    width: 100%;
    height: 30px;
    cursor: pointer;
    line-height: 30px;
    padding-left: 10px;
  }

  .list ul li:hover {
    background-color: #cccccc;
  }
}
</style>
